<template>
  <div v-if="selectPlatform == 2">
    <el-tabs
      v-model="activeTab"
      type="border-card"
      @tab-click="handleTabClick"
    >
      <el-tab-pane
        label="留存分析"
        name="retention"
      >
        <component
          :is="dynamicComponents.retention"
          v-if="activeTab == 'retention'"
        />
      </el-tab-pane>
      <el-tab-pane
        label="ARPU统计"
        name="up"
      >
        <component
          :is="dynamicComponents.up"
          v-if="activeTab == 'up'"
        />
      </el-tab-pane>
      <el-tab-pane
        label="IPU统计"
        name="ipu"
      >
        <component
          :is="dynamicComponents.ipu"
          v-if="activeTab == 'ipu'"
        />
      </el-tab-pane>
      <el-tab-pane
        label="ECPM统计"
        name="ecpm"
      >
        <component
          :is="dynamicComponents.ecpm"
          v-if="activeTab == 'ecpm'"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import retention from './retentionData.vue'
import up from './upRetentionData.vue'
import ipu from './ipu.vue'
import ecpm from './ecpm.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const selectPlatform = ref(1)
const isPlatform = () => {
  const platform = localStorage.getItem('platform')
  if (platform == 0 || platform == '' || platform == null || platform == undefined) {
    ElMessage({
      type: 'error',
      message: '请先选择渠道'
    })
    selectPlatform.value = 1
    // setTimeout(() => {
    //   window.location.href = '/#/layout/dashboard'
    // }, 1000)
  } else {
    selectPlatform.value = 2
  }
}

isPlatform()
const dynamicComponents = {
  retention,
  up,
  ipu,
  ecpm
}

const activeTab = ref('retention')

const handleTabClick = (tab) => {
  activeTab.value = tab.name
}
</script>
